<template>
    <div class="article-box" v-loading="loading">
      <div class="article-title">{{info.title}}</div>
      <div class="article-author">
        <img :src="info.user.header_image" alt="" class="article-author-img" v-preview="info.user.header_image">
        <div class="article-info-top">
          <span class="article-author-name" @click="switchHomePage">{{info.user.nickname}}</span>
          <span @click="follow" v-if="!isFollow" class="article-author-follow"><i class="el-icon-plus"></i>关注</span>
          <span @click="disFollow" v-if="isFollow" class="article-author-follow-active"><i class="el-icon-check"></i>已关注</span>
        </div>
        <div class="article-info-bottom">
          <span class="article-add-time">{{info.add_time}}</span>
          <span class="article-count"><i class="iconfont icon-wenzhang"></i>{{info.user.article_num}}</span>
          <span class="article-view"><i class="iconfont icon-fensiquanguanzhu"></i>{{info.user.fans_num}}</span>
          <span class="article-like"><i class="iconfont icon-favour-full"></i>{{info.user.liked_num}}</span>
        </div>
      </div>
      <div v-html="info.content" class="article-content">
        {{info.content}}
      </div>
      <div class="article-bottom-author">
        <img :src="info.user.header_image" alt="" class="article-author-img" v-preview="info.user.header_image">
        <div class="article-bottom-info-top">
          <span class="article-author-name" @click="switchHomePage">{{info.user.nickname}}</span>
        </div>
        <div class="article-bottom-info-bottom">
          <span class="article-add-time">{{info.add_time}}</span>
          <span class="article-count"><i class="iconfont icon-wenzhang"></i>{{info.user.article_num}}</span>
          <span class="article-view"><i class="iconfont icon-fensiquanguanzhu"></i>{{info.user.fans_num}}</span>
          <span class="article-like"><i class="iconfont icon-favour-full"></i>{{info.user.liked_num}}</span>
        </div>
        <span @click="follow" v-if="!isFollow" class="article-bottom-author-follow"><i class="el-icon-plus"></i>关注</span>
        <span @click="disFollow" v-if="isFollow" class="article-bottom-author-follow-active"><i class="el-icon-check"></i>已关注</span>
      </div>
      <div class="article-like-group">
          <div class="article-like-button" v-if="!isPraise" @click="praise"><i class="iconfont icon-favour-full" style="font-size: 19px"></i><span class="article-like-text">点赞</span><span>|</span><span class="article-like-number">{{info.like_number}}</span></div>
          <div class="article-like-button-active" v-if="isPraise" @click="disPraise"><i class="iconfont icon-favour-full" style="font-size: 19px"></i><span class="article-like-text">点赞</span><span>|</span><span class="article-like-number">{{info.like_number}}</span></div>
          <div class="article-collection-button" v-if="!isCollection" @click="collection"><i class="iconfont icon-collection-b" style="font-size: 19px"></i><span class="article-collection-text">添加收藏</span></div>
          <div class="article-collection-button-active" v-if="isCollection" @click="disCollection"><i class="iconfont icon-collection-b" style="font-size: 19px"></i><span class="article-collection-text">添加收藏</span></div>
      </div>


      <!--评论发送区-->
      <div class="article-comment-section">
        <el-input
          type="textarea"
          @focus="onFocus"
          @keyup.ctrl.enter.native="sendComment"
          class="article-comment-input"
          :autosize="{ minRows: 3, maxRows: 5}"
          placeholder="写下你的评论..."
          v-model="commentText">
        </el-input>
        <div class="article-send-section" v-show="showButton">
          <span class="article-send-tip">{{sendCommentTip}}</span>
          <span class="article-cancel-text" @click="onBlur">取消</span>
          <span @click="sendComment" class="article-send-text">发送</span>
        </div>
      </div>


      <NoData v-if="commentCount===0" :tip="tip" />

      <!--评论展示区-->
      <div class="article-comment-show-section" v-if="commentCount!==0">
        <div class="article-comment-show-section-top">
          <span>{{commentCount}}条评论</span>
        </div>
        <ul class="article-comment-show-content-box">
          <li class="article-comment-show-content" v-for="(item,index) in commentInfo" :key="index">
            <img :src="item.user.header_image" alt="" class="article-comment-show-avatar">
            <span class="article-comment-show-username">{{item.user.nickname}}</span>
            <span class="article-comment-show-add-time">{{item.add_time}}</span>
            <span class="article-comment-show-desc">{{item.content}}</span>
          </li>
        </ul>
      </div>

      <el-pagination
        class="comment-pages"
        background
        layout="prev, pager, next"
        :total="commentCount"
        @current-change="changePage"
        :page-size="10">
      </el-pagination>



      <!--添加新评论-->
      <div class="article-new-comment-box">
        <span class="article-new-comment-title" @click="showSendCommentBox">添加新评论</span>
      </div>
      <div class="article-comment-section-special" v-show="showSendComment">
        <el-input
          type="textarea"
          @keyup.ctrl.enter.native="sendComment"
          :autosize="{ minRows: 3, maxRows: 5}"
          placeholder="写下你的评论..."
          v-model="commentText">
        </el-input>
        <div class="article-send-section">
          <span class="article-send-tip">{{sendCommentTip}}</span>
          <span class="article-cancel-text" @click="showSendComment=false">取消</span>
          <span @click="sendComment" class="article-send-text">发送</span>
        </div>
      </div>

      <!--推荐阅读区域-->
      <!--<div class="recommend-reading-content">-->
        <!--<span class="recommend-reading-title">推荐阅读</span>-->
        <!--<ul>-->
          <!--<li>-->
            <!---->
          <!--</li>-->
        <!--</ul>-->
      <!--</div>-->
    </div>
</template>

<script>
  import {getArticleAll} from "../../api/article";
  import {articlePraise,articleCollection,userFollow} from "../../api/operation";
  import {isCollection,isFollow,isPraise} from "../../api/operation";
  import {unCollection,unFollow,unPraise} from "../../api/operation";
  import {postComment,getComment} from "../../api/comment";
  import NoData from '../../components/noData'
  import {mapState} from 'vuex'

  export default {
      name: "index",
      data(){
        return {
          info:{
            user:{

            }
          },
          loading:false,
          commentText:'',
          showButton:false,        //控制评论框下面的按钮和文字是否显示
          isFollow:false,       //是否关注
          isPraise:false,         //是否点赞
          isCollection:false,    //是否收藏
          commentInfo:{},   //评论信息
          commentCount:0,   //评论条数
          tip:'当前还没任何评论，赶快占沙发吧',    //没有评论的时候显示的提示语
          showSendComment:false,    //控制最底部的评论发送框的显示
          sendCommentTip:'Ctrl+Enter 发表'   //发表评论的提示语
        }
      },
      components:{
        NoData
      },
      computed:{
        ...mapState('user', {
          token: state => state.token,
        }),
      },
      created(){
        this.loading=true;
        this.getArticleList();
        this.getCommentList();
      },
      methods:{
        //拉取文章列表，如果用户登陆了，那就判断他是否点赞收藏关注了该文章以及作者
        getArticleList(){
          let vm=this;
          getArticleAll(vm.$route.query.id,'').then(res=>{
            vm.info=res.data;
            if(vm.token){
              this.judgeFollow();
              this.judgeCollection();
              this.judgePraise();
              this.loading=false;
            }else{
              vm.loading=false;
            }
          }).catch(error=>{
            vm.loading=false;
          })
        },
        onFocus(){
          this.showButton=true;
        },
        onBlur(){
          this.showButton=false;
        },
        sendComment(){
          let vm=this;
          if(vm.token){
            vm.sendCommentTip='正在发送中...';
            const formData = new FormData();
            formData.append('article',vm.info.id);
            formData.append('content',vm.commentText);
            postComment(formData).then(res=>{
              vm.sendCommentTip='Ctrl+Enter 发表';
              vm.$message.success('发送成功');
              vm.commentText='';
              vm.getCommentList();
            }).catch(error=>{
              vm.sendCommentTip='Ctrl+Enter 发表';
              vm.$message.error('发送失败');
            })
          }else{
            vm.$message.error('请先登录在进行以下操作');
          }
        },
        switchHomePage(){
          this.$router.push({path:'/homePage',query:{'id':this.info.user.id}});
        },
        //点赞文章
        praise(){
          let vm=this;
          if(vm.token){
            articlePraise({"article":vm.info.id}).then(res=>{
              vm.isPraise=true;
              vm.info.like_number+=1;
              vm.$message.success('点赞成功');
            }).catch(error=>{
              vm.$message.error('点赞失败');
            })
          }else{
            vm.$message.error('请先登录在进行以下操作');
          }
        },
        //收藏文章
        collection(){
          let vm=this;
          if(vm.token){
            articleCollection({"article":vm.info.id}).then(res=>{
              vm.$message.success('收藏成功');
              vm.isCollection=true;
            }).catch(error=>{
              vm.$message.error('收藏失败');
            })
          }else{
            vm.$message.error('请先登录在进行以下操作');
          }
        },
        //关注用户
        follow(){
          let vm=this;
          if(vm.token){
            userFollow({"followed_user":vm.info.user.id}).then(res=>{
              vm.$message.success('关注成功');
              vm.isFollow=true;
            }).catch(error=>{
              vm.$message.error("关注失败");
            })
          }else{
            vm.$message.error('请先登录在进行以下操作');
          }
        },
        //取消关注
        disFollow(){
          let vm=this;
          if(vm.token){
            unFollow(vm.info.user.id).then(res=>{
              vm.$message.success('取消关注成功');
              vm.isFollow=false;
            }).catch(error=>{
              vm.$message.error('取消关注失败');
            })
          }else{
            vm.$message.error('请先登录在进行以下操作');
          }
        },
        //取消收藏
        disCollection(){
          let vm=this;
          if(vm.token){
            unCollection(vm.info.id).then(res=>{
              vm.$message.success('取消收藏成功');
              vm.isCollection=false;
            }).catch(error=>{
              vm.$message.error('取消收藏失败');
            })
          }else{
            vm.$message.error('请先登录在进行以下操作');
          }
        },
        //取消点赞
        disPraise(){
          let vm=this;
          if(vm.token){
            unPraise(vm.info.id).then(res=>{
              vm.info.like_number-=1;
              vm.isPraise=false;
              vm.$message.success('取消点赞成功');
            }).catch(error=>{
              vm.$message.error('取消点赞失败');
            })
          }else{
            vm.$message.error('请先登录在进行以下操作');
          }
        },
        //判断是否关注
       judgeFollow(){
          isFollow(this.info.user.id).then(res=>{
            this.isFollow=true;
          }).catch(error=>{
            this.isFollow=false;
          });
        },
        //判断是否收藏
        judgeCollection(){
          isCollection(this.info.id).then(res=>{
            this.isCollection=true;
          }).catch(error=>{
            this.isCollection=false;
          })
        },
        //判断是否点赞
        judgePraise(){
          isPraise(this.info.id).then(res=>{
            this.isPraise=true;
          }).catch(error=>{
            this.isPraise=false;
          })
        },
        getCommentList(){
          getComment(this.$route.query.id + '&ordering=-add_time').then(res=>{
            console.log(res.data);
            this.commentCount=res.data.count;
            this.commentInfo=res.data.results;
          }).catch(error=>{
            console.log(error.data);
            this.commentInfo=0;
          })
        },
        changePage(now){
          this.loading=true;
          getComment(this.$route.query.id + '&page=' + now + '&ordering=-add_time').then(res=>{
            this.commentCount=res.data.results;
          }).catch(error=>{

          })
        },
        showSendCommentBox(){
          this.showSendComment=!this.showSendComment;
        }
      }
    }
</script>

<style lang="stylus" scoped>
@import "../../stylus/color.styl"
  .article-box{
    max-width 600px!important
    margin 0 auto
    width 100%
  }
  .article-title{
    font-size 32px
    font-weight 700
    color $color-title
    margin-top 20px
  }
  .article-author{
    margin 30px 0 40px
    position relative
  }
  .article-bottom-author{
    border 1px solid $color-border
    padding 30px 20px
    margin 30px 0 40px
    position relative
    border-radius 8px
  }
  .article-author-img{
    width 48px
    height 48px
    border-radius 24px
    border 1px solid $color-border
    cursor pointer
  }
  .article-info-top{
    position absolute
    left 60px
    top 4px
  }
  .article-bottom-info-top{
    position absolute
    left 80px
    top 34px
  }
  .article-info-bottom{
    position absolute
    left 60px
    bottom 4px
    font-size 12px
    color $color-gray
  }
  .article-bottom-info-bottom{
    position absolute
    left 80px
    bottom 34px
    font-size 12px
    color $color-gray
  }
  .article-author-name{
    font-size 16px
    color $color-content
    cursor pointer
  }
  .article-author-follow{
    color $color-background
    background-color $color-success
    font-size 12px
    padding 2px 8px 2px 6px
    margin-left 8px
    border-radius 8px
    cursor pointer
  }
  .article-author-follow-active{
    color $color-gray
    background-color $color-background
    font-size 12px
    padding 2px 8px 2px 6px
    margin-left 8px
    border-radius 8px
    cursor pointer
    border 1px solid $color-border
  }
  .article-bottom-author-follow{
    color $color-background
    background-color $color-success
    font-size 16px
    padding 6px 12px 6px 10px
    border-radius 6px
    position absolute
    right 16px
    top 42px
    cursor: pointer;
  }
  .article-bottom-author-follow-active{
    font-size 16px
    padding 6px 12px 6px 10px
    border-radius 6px
    position absolute
    right 16px
    top 42px
    cursor: pointer;
    color $color-gray
    background-color $color-background
    border 1px solid $color-border
  }
  .article-like-button{
    float left
    padding 13px 0 15px 0
    width 140px
    border-radius 40px
    text-align center
    border 1px solid $color-pink
    color $color-pink
    cursor pointer
  }
  .article-like-button-active{
    float left
    padding 13px 0 15px 0
    width 140px
    border-radius 40px
    text-align center
    border 1px solid $color-pink
    cursor pointer
    color $color-background
    background-color $color-pink
  }
  .article-like-text{
    padding 0 6px 0 0
  }
  .article-like-number{
    padding-left 6px
  }
  .article-collection-button{
    float right
    padding 13px 0 15px 0
    width 140px
    border-radius 40px
    text-align center
    border 1px solid $color-waring
    color $color-waring
    cursor pointer
  }
  .article-collection-button-active{
    float right
    padding 13px 0 15px 0
    width 140px
    border-radius 40px
    text-align center
    border 1px solid $color-waring
    cursor pointer
    color $color-background
    background-color $color-waring
  }
  .article-collection-text{
    padding-left 6px
  }
  .article-comment-input{
    margin-top 60px
  }
  .article-send-section{
    position relative
  }
  .article-send-tip{
    color $color-gray
    font-size 13px
    position absolute
    left 4px
    top 12px
    line-height 36px
  }
  .article-cancel-text{
    color $color-gray
    font-size 13px
    position absolute
    right 110px
    top 12px
    line-height 36px
    cursor pointer
  }
  .article-send-text{
    font-size 13px
    position absolute
    right 4px
    display block
    width 80px
    cursor pointer
    text-align center
    height 36px
    line-height 36px
    background-color $color-success
    color $color-background
    top 12px
  }
  .article-comment-show-section-top{
    margin 50px 0 20px 0
  }
  .article-comment-show-content-box{
    list-style none
    padding 0
    margin 0
  }
  .comment-pages{
    float right
    margin-top 20px
    margin-bottom 30px
  }
  .article-comment-show-content{
    padding 30px 0
    border-top 1px solid $color-divider
  }
  .article-comment-show-avatar{
    width 40px
    height 40px
    border-radius 19px
    float left
  }
  .article-comment-show-username{
    font-size 14px
    color $color-title
    margin-left 8px
    margin-top 4px
    display inline-block
  }
  .article-comment-show-add-time{
    font-size 12px
    margin-left 48px
    display block
    margin-top 3px
    color $color-gray
  }
  .article-comment-show-desc{
    display block
    margin 12px 0 10px 0
    font-size 16px
    color $color-title
  }
  .article-new-comment-box{
    margin 10px 0 30px 0
  }
  .article-new-comment-title{
    font-size 15px
    color $color-gray
    display block
    margin-top 20px
    cursor pointer
  }
  .article-comment-section-special{
    margin-bottom 150px
  }


  //字体图标
  .icon-wenzhang{
    font-size 12px
    margin-right 2px
    margin-left 7px
  }
  .icon-pinglun{
    font-size 12px
    margin-right 2px
    margin-left 7px
  }
  .icon-fensiquanguanzhu{
    font-size 13px
    margin-right 2px
    margin-left 7px
  }
  .icon-favour-full{
    font-size 13px
    margin-right 2px
    margin-left 7px
  }
  .el-icon-check{
    margin-right 4px
  }
  .el-icon-plus{
    margin-right 4px
  }
</style>
